<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>arcgis-mapr-ring</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <!-- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #mapCanvas {
            padding: 0;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'extend',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/plugins"
            }]
        };
    </script>
    <script type="text/javascript" src="../build/arcgis-map-ring.js"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <!-- <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> -->
</head>

<body>
    <div id="mapCanvas">
    </div>
    <script>
        var map, baseLayer, ring;
        require(["esri/map", "esri/request", "dojo/parser", "dojo/number", "dojo/json", "esri/geometry/Point",
            "extend/RasterLayer", "dojo/domReady!"
        ], function (Map, esriRequest, parser, number, JSON, Point, RasterLayer) {
            parser.parse();
            map = new Map("mapCanvas", {
                center: [109.485, 30.279],
                zoom: 5,
                basemap: "gray"
            });

            map.on("load", mapLoaded);

            function mapLoaded() {
                baseLayer = new RasterLayer(null, {
                    opacity: 1
                });
                map.addLayers([baseLayer]);
                map.on("extent-change", redraw);
                map.on("resize", redraw);

                var points = [[116.46, 39.92], [113.27, 23.13], [102.29, 27.92], [87.68, 43.77], [121.47, 31.23]];
                var data = [];
                points.forEach(function (point) {
                    data.push(new Point({
                        x: point[0],
                        y: point[1],
                        spatialReference: {
                            wkid: 4326
                        },
                        //radius为圆半径
                        radius: 50 + Math.floor(Math.random() * 50),
                        //color(光晕颜色)为rgb,例如[0,255,255]
                        color: [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255)]
                    }));
                });
                ring = new Ring(map, {
                    canvas: baseLayer._element,
                    data: data
                });
                redraw();
            }

            function redraw() {
                baseLayer._element.width = map.width;
                baseLayer._element.height = map.height;
                ring.start();
            }
        });
    </script>
</body>

</html>